<template>
  <div>
    <div style="padding-top:20px;margin-left: 40px;" v-if="MuchShow==false">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="法人姓名:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.principalPerson}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业法人证件号:" style="margin-left:20px">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.principalCertNo}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="身份证开始时间:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.cardPeriodBegin}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证结束时间:" style="margin-left:20px">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.cardPeriodEnd}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="统一社会信用代码:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.orgCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业执照结束时间:" style="margin-left:20px">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.busLicenseExpire}}</span>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="营业执照开始时间:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{shopgetinfo.attach.busLicenseStart}}</span>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="商户类型:">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{ shopgetinfo.attach.merchantType | watchMerchantType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营类目:" style="margin-left:20px">
            <span style="width:235px;display:inline-block;padding-left: 12px;">{{ shopgetinfo.attach.mcc | watchMcc}}</span>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row :gutter="24">-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title">法人姓名:</span>-->
<!--            <span class="account_item_content">{{shopgetinfo.attach.principalPerson}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title">企业法人证件号：</span>-->
<!--            <span class="account_item_content">{{shopgetinfo.attach.principalCertNo}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row :gutter="24">-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title ellipsis-element">统一社会信用代码：</span>-->
<!--            <span class="account_item_content">{{shopgetinfo.attach.orgCode}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title">营业执照有效期：</span>-->
<!--            <span class="account_item_content">{{shopgetinfo.attach.busLicenseExpire | formatDate}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      -->
<!--      <el-row :gutter="24">-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title">商户类型：</span>-->
<!--            <span class="account_item_content">{{ shopgetinfo.attach.merchantType | watchMerchantType }}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <div class="account_item">-->
<!--            <span class="account_item_title">经营类目：</span>-->
<!--            <span class="account_item_content">{{ shopgetinfo.attach.mcc | watchMcc}}</span>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">营业执照</span>
          <div class="shop_img">
            <el-image ref="preview" :preview-src-list="srcList" :src="shopgetinfo.attach.license" style="width:140px;height:140px" v-if="shopgetinfo.attach.license"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.license">暂无执照</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">身份证正面(国徽)</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardFront" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardFront"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardFront">暂无证件照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">身份证反面</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardBack" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardBack"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardBack">暂无证件照</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">店面门头照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.thedoor" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.thedoor"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.thedoor">暂无门头照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
<!--        <div class="account_item">-->
<!--          <span class="account_item_title">银行卡/开户证明</span>-->
<!--          <div class="shop_img">-->
<!--            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.bankinfoPhoto" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.bankinfoPhoto"></el-image>-->
<!--            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.bankinfoPhoto">暂无许可证</span>-->
<!--          </div>-->
<!--        </div>-->
        <div class="account_item">
          <span class="account_item_title">店内场景照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.scene" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.scene"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.scene">暂无场景照</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">收银台照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.companyInward" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.companyInward"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.companyInward">暂无场景照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">食品经营许可证</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.food" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.food"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.food">暂无许可证</span>
          </div>
        </div>
      </div>
    </div>
    <el-form v-if="MuchShow==true" label-width="230px">
      <div style="display:flex">
        <el-form-item label="企业类型:" label-width="120px">
          <el-select @change="forceRefresh" style="width: 235px;" v-model="shopgetinfo.attach.merchantType" placeholder="请选择企业类型">
            <el-option label="自然人、小微" value="01"></el-option>
            <el-option label="个体工商户" value="02"></el-option>
            <el-option label="企业商户" value="03"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经营类目:" label-width="120px">
          <el-select @change="forceRefresh" style="width: 235px;" v-model="shopgetinfo.attach.mcc" placeholder="请选择企业类型">
            <el-option label="其他" value="0"></el-option>
            <el-option label="美食" value="2015050700000000"></el-option>
            <el-option label="超市便利店" value="2015091000052157"></el-option>
            <el-option label="休闲娱乐" value="2015062600004525"></el-option>
            <el-option label="购物" value="2015062600002758"></el-option>
            <el-option label="爱车" value="2016062900190124"></el-option>
            <el-option label="生活服务" value="2015063000020189"></el-option>
            <el-option label="教育培训" value="2016042200000148"></el-option>
            <el-option label="医疗健康" value="2016062900190296"></el-option>
            <el-option label="航旅" value="2015080600000001"></el-option>
            <el-option label="专业销售/批发" value="2016062900190337"></el-option>
            <el-option label="政府/社会组织" value="2016062900190371"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="法人信息:"  label-width="120px">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.principalPerson" style="width:235px" />
          </el-col>
        </el-form-item>
        <el-form-item label="身份证号:" label-width="120px">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.principalCertNo" style="width:235px" />
          </el-col>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item  label="身份证开始时间:" label-width="120px">
          <el-col :span="12">
            <el-date-picker @blur="inputClick" style="width:235px" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"  v-model="shopgetinfo.attach.cardPeriodBegin" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item  label="身份证结束时间:" label-width="120px">
          <el-col :span="12">
            <el-date-picker @blur="inputClick" style="width:235px"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"   v-model="shopgetinfo.attach.cardPeriodEnd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="电子邮箱:" prop="mailbox" label-width="120px">
          <el-col :span="12">
            <el-input v-model="shopgetinfo.mailbox" style="width:235px" />
          </el-col>
        </el-form-item>
        <el-form-item label="统一社会信用代码:"  label-width="120px">
          <el-col :span="12">
            <el-input @input="inputClick" v-model="shopgetinfo.attach.orgCode" style="width:235px" placeholder="个体工商户、企业商户必填" />
          </el-col>
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item v-if="shopgetinfo.attach.merchantType != '01'" label="营业执照开始时间:" label-width="120px">
          <el-col :span="12">
            <el-date-picker @blur="inputClick"  style="width:235px"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"  v-model="shopgetinfo.attach.busLicenseStart" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item v-if="shopgetinfo.attach.merchantType != '01'" label="营业执照结束时间:" label-width="120px">
          <el-col :span="12">
<!--          format="yyyy 年 MM 月 dd 日"   value-format="yyyy-MM-dd"-->
            <el-date-picker @blur="inputClick"  style="width:235px"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"  v-model="shopgetinfo.attach.busLicenseExpire" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </div>
      <el-form-item v-if="shopgetinfo.attach.merchantType != '01'" label="营业执照" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.license" style="display: inline-block;" />
      </el-form-item>
      <el-form-item label="身份证正面(国徽)" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.idCardFront" style="display: inline-block;" />
      </el-form-item>
      <el-form-item label="身份证反面" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.idCardBack" style="display: inline-block;" />
      </el-form-item>
      <el-form-item label="店面门头照" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.thedoor" style="display: inline-block;" />
      </el-form-item>
      <el-form-item label="食品经营许可证" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.food" style="display: inline-block;" />
      </el-form-item>
      <el-form-item label="店内场景照" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.scene" style="display: inline-block;" />
      </el-form-item>
<!--      <el-form-item label="银行卡/开户证明" label-width="120px">-->
<!--        <single-upload v-model="shopgetinfo.attach.bankinfoPhoto" style="display: inline-block;" />-->
<!--      </el-form-item>-->
      <el-form-item label="收银台照" label-width="120px">
        <single-upload v-model="shopgetinfo.attach.companyInward" style="display: inline-block;" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { updateMchShop } from "@/api/sysSetUp";
import singleUpload from "./singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import utils from "@/utils/utils";
export default {
  components: { singleUpload },
  directives: { permission },
  filters: {
    watchMerchantType(val) {
        if (val == '01') {
          return '自然人、小微'
        } else if (val == '02') {
          return '个体工商户'
        } else if (val == '03') {
          return '企业商户'
        }
      },
    watchMcc(val){
      if (val == '0') {
        return '其他'
      } else if (val == '2015050700000000') {
        return '美食'
      } else if (val == '2015091000052157') {
        return '超市便利店'
      }else if (val == '2015062600004525') {
        return '休闲娱乐'
      }else if (val == '2015062600002758') {
        return '购物'
      }else if (val == '2016062900190124') {
        return '爱车'
      }else if (val == '2015063000020189') {
        return '生活服务'
      }else if (val == '2016042200000148') {
        return '教育培训'
      }else if (val == '2016062900190296') {
        return '医疗健康'
      }else if (val == '2015080600000001') {
        return '航旅'
      }else if (val == '2016062900190337') {
        return '专业销售/批发'
      }else if (val == '2016062900190371') {
        return '政府/社会组织'
      }
    },
    formatDate: function(value) {
      if(value !=  null){
        let substring = value.substring(0,10);
        return substring;
      }else {
        return value;
      }
    },
  },
  props: {
    shopgetinfo: {
      type: Object,
    },
    MuchShow: {
      type: Boolean,
    },
    mailbox: {
      type: Boolean,
    },
  },
  data() {
    return {
      loading: false,
      srcList: [],
      levelList:["第一个","第二个","第三个"]
    };
  },
  created() {
    if (utils.isNull(this.shopgetinfo.attach.mcc)) {
      this.shopgetinfo.attach.mcc = "0";
    }
  },
  watch: {
    shopgetinfo: {
      handler(val, old) {
        if (val == null) {
          val.attach == "";
        }
        if (val.attach) {
          if (typeof val.attach == "string") {
            val.attach = JSON.parse(val.attach);
            if (utils.isNull(val.attach.mcc)) {
              val.attach.mcc = "0";
            }
          }
        } else {
          val.attach = {
            license: "",
            idCardFront: "",
            idCardBack: "",
            thedoor: "",
            food: "",
            scene: "",
            mcc: "0",
          };
        }
      },
      immediate: true,
      deep: true,
    },
    MuchShow: {
      handler(val, old) {
        this.MuchShow = val
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    forceRefresh() {
      this.$forceUpdate();
    },
    submit() {
      var _this = this;
      this.loading = true;
      updateMchShop(this.shopgetinfo)
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.$message.success("修改成功");
          _this.$store
            .dispatch("tagsView/delView", _this.$route)
            .then(({ visitedViews }) => {
              _this.$router.push({
                path: "/sysMch/list",
              });
            });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    inputClick() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.account_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 50px;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  width: 160px;
  display: block;
}
.account_item_title_app {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 140px;
}
.shop_img {
  width: 140px;
  height: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-left: 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_img_notitle {
  font-size: 14px;
  color: #c0c4cc;
}
.account_conter_item {
  display: flex;
}
/deep/.el-upload__tip{
  max-width: 600px;
  display: block!important;
}

/deep/ label {
  font-weight: 400!important;
}

.ellipsis-element{
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:break-all;
  overflow:hidden;
}
/deep/ .el-form-item__label{
  white-space:nowrap;
  overflow:hidden;
}


</style>
